<template>
  <div>
    <div class="button-group">
      <el-button type="primary" size="small" @click="toAdd">添加</el-button>
    </div>
    <!-- 数据表格 -->
    <div class="data-table">
      <template>
        <el-table
          :data="typeList"
          style="width: 100%"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column prop="typeId" label="编 号" v-if="show" />
          <el-table-column prop="typeName" label="名 称" />
          <el-table-column prop="typeBlogCount" label="帖 子 数" />
          <el-table-column prop="enable" label="启 用 状 态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.enable === 1" type="success">启用</el-tag>
              <el-tag v-else type="info">未启用</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操 作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="toUpdate(scope.row.typeId)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="text"
                @click="deleteById(scope.row.typeId)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <!-- 数据表格结束 -->

    <!-- 添加弹窗 -->
    <el-dialog title="添加" :visible.sync="addDialog" width="30%">
      <type-add v-if="addDialog" @after="getList" @closeDialog="closeDialog" />
    </el-dialog>
    <!-- 添加弹窗结束 -->

    <!-- 修改弹窗 -->
    <el-dialog title="修改" :visible.sync="updateDialog" width="30%">
      <type-update
        v-if="updateDialog"
        :active-id="activeId"
        @after="getList"
        @closeDialog="closeDialog"
      />
    </el-dialog>
    <!-- 修改弹窗结束 -->
  </div>
</template>

<script>
import { deleteById, list } from "@/api/type";
import typeAdd from "./type-add.vue";
import typeUpdate from "./type-update.vue";

export default {
  components: {
    typeAdd,
    typeUpdate,
  },
  data() {
    return {
      // 分类列表
      typeList: [],
      // 控制添加弹窗显示
      addDialog: false,
      // 控制修改弹窗显示
      updateDialog: false,
      // 当前点击的ID
      activeId: null,
      // 隐藏编号
      show: false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 查询分类列表
    getList() {
      list().then((res) => {
        this.typeList = res.data;
      });
    },
    // 打开添加弹窗
    toAdd() {
      this.addDialog = true;
    },
    // 关闭弹窗
    closeDialog() {
      this.addDialog = false;
      this.updateDialog = false;
    },
    // 打开修改弹窗
    toUpdate(id) {
      this.updateDialog = true;
      this.activeId = id;
    },
    // 根据id删除
    deleteById(id) {
      this.$confirm("此操作将永久删除该分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteById(id).then((res) => {
          this.$message.success(res.msg);
          this.getList();
        });
      });
    },
  },
};
</script>

<style>
</style>